<template>
    <div class="retrievePwdBar">
        <form>
            <div class="input-bar-item">
                <div class="label phone-label">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujihao"></use>
                    </svg>
                    <span>手机号码</span>
                </div>
                <div class="input-bar">
                    <input type="number" name="mobile" placeholder="请输入账号/手机号" v-model="formData.mobile" data-vv-as="手机号" v-validate="'required|mobile'" @input="isGiveWayMobile=true">
                    <p role="alert" v-show="errors.has('mobile') || !isGiveWayMobile" class="toast-text-style">
                        <svg class="icon" v-show="true" aria-hidden="true">
                            <use xlink:href="#icon-gantanhao"></use>
                        </svg>
                        {{ errors.first('mobile') }}
                        {{ !isGiveWayMobile ? '该手机号未注册' : '' }}
                    </p>
                    <div class="font-item">
                        <svg class="icon" v-show="false" aria-hidden="true">
                            <use xlink:href="#icon-qingchu"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="input-bar-item">
                <div class="label">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanzhengma"></use>
                    </svg>
                    <span>验证码</span>
                </div>
                <div class="input-bar">
                    <input type="text" v-model="formData.verifyCode" placeholder="请输入验证码" @input="isGiveWayVerify = true">
                    <p role="alert" class="toast-text-style" v-show="!isGiveWayVerify">
                        <svg class="icon" v-show="true" aria-hidden="true">
                            <use xlink:href="#icon-gantanhao"></use>
                        </svg>
                        {{ !isGiveWayVerify ? '验证码输入错误' : '' }}
                    </p>
                    <div class="verify">
                        <span v-if="!isSend" @click="sendVerify" :style="{color: colorStyle}">获取验证码</span>
                        <span v-else style="color: #6f9ae6">重新获取({{ timeOut }}s)</span>
                    </div>
                </div>
            </div>
            <div class="input-bar-item">
                <div class="label">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <span>设置新密码</span>
                </div>
                <div class="input-bar">
                    <input type="password" name="password" v-model="formData.password" v-validate="'required|min:8|max:20'"  placeholder="密码为8-20位字母，数字或符号组合" @input="pressPwd">
                    <p role="alert" v-show="errors.has('password') || !isGiveWayPassword" class="toast-text-style">
                        <svg class="icon" v-show="true" aria-hidden="true">
                            <use xlink:href="#icon-gantanhao"></use>
                        </svg>
                        {{ errors.first('password') }}
                    </p>
                    <div class="font-item" v-show="isShowIcon">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qingchu"></use>
                        </svg>
                        <svg class="icon xianshi" aria-hidden="true">
                            <use xlink:href="#icon-xianshi"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </form>
        <btn @handleSubmit="handleSubmit" v-bind:user="user">确定</btn>
    </div>
</template>

<script>
    import btn from "@/components/btn/btn";
    export default {
        name: "retrievePwdBar",
        data() {
            return {
                isSend: false,  // 是否已发送验证码
                iptStyle: 'unset',
                isShowIcon: false,

                timeOut: 59,
                formData: {
                    mobile: '',
                    verifyCode: '',
                    password: '',
                },

                colorStyle: '',

                isGiveWayMobile: true,
                isGiveWayVerify: true,
                isGiveWayPassword: true
            }
        },
        methods: {
            /*
            * 提交
            * */
            handleSubmit() {
                const isMobile = this.formData.mobile === this.$store.state.mobile
                const isVerify = this.formData.verifyCode === this.$store.state.verifyCode

                // 手机未注册
                if (!isMobile) {
                    // 正则匹配校验手机号是否符合规则 如果验证规则失败则优先显示验证失败，如果验证成功才显示手机未注册
                    if (!/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(this.formData.mobile)) {
                        this.isGiveWayMobile = true
                        return;
                    }
                    this.isGiveWayMobile = false
                    return;
                }
                // 验证码错误
                else if (!isVerify) {
                    this.isGiveWayVerify = false
                    return;
                }
                this.$validator.validate()
                    .then(valid => {
                        if (valid) {
                            // 修改成功
                            // 跳转到登录界面
                            this.$router.push({
                                path: '/login',
                                name: 'login'
                            })
                        }
                    })
            },
            /*
            * 获取验证码
            * */
            sendVerify() {
                // 验证手机号码输入符合规则才可以发送验证码
                // 规则限制验证成功
                if (/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(this.formData.mobile)) {
                    this.isSend = true
                    let timer = setInterval(() => {
                        this.timeOut -= 1
                        if (this.timeOut === 0) {
                            clearInterval(timer)

                            this.isSend = false
                            this.timeOut = 59
                        }
                    }, 1000)

                    console.log(this.$store.state.verifyCode);
                }
            },
            pressPwd() {
                if (this.formData.password) {
                    this.iptStyle = '100px'
                    this.isShowIcon = true
                }else {
                    this.iptStyle = 'unset'
                    this.isShowIcon = false
                }
            }
        },
        computed: {
            // 监听手机号输入是否为空， 为空时提交按钮将不能被点击
            user: function () {
                return !this.formData.mobile
            }
        },
        watch: {
            // 监听手机号输入是否合法，如果合法 获取验证码按钮就高亮显示(可点击)状态
            'formData.mobile': function (val) {
                if (/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(val)) {
                    this.colorStyle = '#0f57d5'
                    return
                }else {
                    this.colorStyle = '#c2c7cd'

                }
            }
        },
        components: {
            btn
        }
    }
</script>

<style lang="scss" scoped>
</style>